<template>
	<view class="container">
		<view class="section" :style="{'backgroundImage': 'url('+$wanlshop.oss(seele.page_conf.wifi_page_bg_img)+')'}">
			<view class="wfi-container">
				<text class="wifi-title">WiFi搜索中</text>
			</view>
			<!-- 文字内容容器 -->
			<view class="banner-content">
				<text class="banner-title">正在连接中，不要退出请稍后</text>
				<view class="experience-btn" @click="connectWifi">点击连接WiFi</view>
				<text class="logo-title">天菲国际WiFi欢迎使用</text>
				<text class="logo-title1">城市中有码的地方就可以扫码无限使用</text>
			</view>
		</view>
		
		<view class="section-s" @click="$wanlshop.to('/pages/apps/find/details/video')" :style="{'backgroundImage': 'url('+$wanlshop.oss(seele.page_conf.wifi_page_adv_img)+')'}">
			<view class="btn-container">
				<button class="btn-title">去开团</button>
			</view>
		</view>
		
		<view class="section-t" v-for="(item,index) in seele.page_wifi_list" :style="{'backgroundImage': 'url('+$wanlshop.oss(item.images[0],0,0)+')'}">
			<view class="info-container">
				<image class="info-img" :src="$wanlshop.oss(item.image,0,0)"></image>
			
				<view class="info">
					<text class="title">{{item.title}}</text>
					<text class="title-s">{{item.description}}</text>
					<view class="sub-info">
						<text class="address">{{item.shop.address}}</text>
					</view>
					<view class="distance">
						<text> 距您直线 {{calculateDistance(current_location,{longitude:item.shop.lng,latitude:item.shop.lat})}} km </text>
					</view>
					<view class="price-tag">
						 <view class="button-container" @click="onGoods(item.id)">
						    <view class="left-section">
							  <uni-icons type="cart"  color="#ffffff" size="27"></uni-icons>
						    </view>
						    <view class="right-section">
						      <text class="action-text">去抢购</text>
						    </view>
						  </view>
					</view>
				</view>
			</view>
		</view>
	
		<view class="section-f">
			<image class="ad-img" :src="$wanlshop.oss(seele.page_conf.wifi_page_adv_img_2,0,0)" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import wifi from "./wifi.js";
	import {mapState} from 'vuex';
	export default {
		computed: {...mapState(['seele'])},
		data() {
			return {
				current_location:{
					longitude:0,latitude:0
				}
			};
		},
		onLoad(options){
			console.log(options);
			if('shop_id' in options){
				this.$store.dispatch('seele/loadWifiPageGoods',options.shop_id);
			}
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					that.current_location = res;
			}});
			
		},
		methods:{
			/**
			     * 计算两个经纬度点之间的距离（单位：公里）
			     * @param {Object} point1 - 第一个点，包含 latitude 和 longitude
			     * @param {Object} point2 - 第二个点，包含 latitude 和 longitude
			     * @returns {number} 距离（公里）
			     */
			    calculateDistance(point1, point2) {
			      const toRadians = (degrees) => (degrees * Math.PI) / 180; // 将度数转换为弧度
			      const R = 6371; // 地球半径，单位：公里
			
			      const lat1 = toRadians(point1.latitude);
			      const lon1 = toRadians(point1.longitude);
			      const lat2 = toRadians(point2.latitude);
			      const lon2 = toRadians(point2.longitude);
			
			      const dLat = lat2 - lat1;
			      const dLon = lon2 - lon1;
			
			      const a =
			        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
			      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			
			      const distance = R * c; // 最终距离
			      return distance.toFixed(2); // 保留两位小数
			    },
			connectWifi(){
				uni.getSystemInfo({
					success: (res) => {
						console.log(res);
						if (!res.wifiEnabled) {
							uni.showToast({
								title: 'Wi-Fi未开启',
								icon: 'error'
							})
						}else{
							wifi.init('CMCC-yan','19710142567' ).then(res => {
								console.log('-=-=-=res', res)
								
							}).catch(e => {
								console.log('-=-=-=e', e)
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		padding: 20rpx;
		min-height: 641rpx; // 根据图片比例调整
		// background: url("@/static/m11.png") center center no-repeat;
		background-size: 100% 100%;
		background-repeat: no-repeat; /* 防止背景图片重复 */
		background-position: center center; /* 将背景图片居中 */
	}
	
	.section-s{
		margin: 70rpx  29rpx 29rpx 29rpx;
		height: 112rpx; // 根据图片比例调整
		// background: url("@/static/m12.png") center center no-repeat;
		background-size: 100% 100%;
		background-repeat: no-repeat; /* 防止背景图片重复 */
		background-position: center center; /* 将背景图片居中 */
	}
	
	.section-t{
		margin: 40rpx  29rpx 29rpx 29rpx;
		height: 520rpx; // 根据图片比例调整
		// background: url("@/static/m13.png") center center no-repeat;
		background-size: 100% 100%;
		background-repeat: no-repeat; /* 防止背景图片重复 */
		background-position: center center; /* 将背景图片居中 */
	}
	
	.section-f{
		margin: 40rpx  29rpx 29rpx 29rpx;
		border-radius: 30rpx;
		.ad-img{
			border-radius: 30rpx;
			width: 696rpx;
			height: 520rpx;
		}
	}
	
	.info-container{
		border-radius: 40rpx;
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		position:relative;
		top: 345rpx;
		.info-img{
			width: 227rpx;
			height: 165rpx;
		}
		.info{
			margin-left: 20rpx;
			.title{
				font-size: 29rpx;
			}
			.title-s{
				font-size: 24rpx;
			}
			.sub-info{
				.address{
					font-size: 24rpx;
					color: #003482;
				}
			}
			.distance{
				text{
					font-size: 24rpx;
					color: #606060;
				}
			}
			.price-tag {
				position: absolute;
				bottom: 10rpx;
				right: 0;
				float: right;
				text {
					font-size: 26rpx;
				}
			}
		}
	}
	
	.wfi-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 251rpx;
		left: 308rpx;
		text{
			font-size: 25rpx;
			color: #fff;
		}
	}
	
	.btn-container{
		display: flex;
		flex-direction: row;
		float: right;
		margin: 12rpx;
		.btn-title{
			font-size: 32rpx;
			background-color: #E0501B;
			color: #fff;
			width: 170rpx;
		}
	}

	.banner-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 416rpx;
		left: 130rpx;
	}

	.banner-title {
		font-size: 29rpx;
		margin-bottom: 30rpx;
		font-weight: bold;
	}
	
	.logo-title{
		font-size: 29rpx;
		margin: 55rpx 0 2rpx 0;
		font-weight: bold;
		
	}
	
	.logo-title1{
		font-size: 29rpx;
		font-weight: bold;
		
	}

	.experience-btn {
		background-color: #E0501B;
		color: #fff;
		padding: 12rpx 40rpx;
		border-radius: 40rpx;
		font-size: 41rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
		transition: all 0.3s;
		width: 416rpx;
		text-align: center;

		&:active {
			transform: scale(0.95);
			opacity: 0.9;
		}
	}
	
	/* 按钮容器 */
	.button-container {
	  display: flex;
	  width: 201rpx;
	  height: 56rpx;
	  border-radius: 40rpx;
	  overflow: hidden; /* 确保子元素圆角不溢出 */
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}
	
	/* 左侧购物车区域 */
	.left-section {
	  flex: 1;
	  background: #FDB700; /* 浅黄色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding:15rpx ;
	}
	
	/* 右侧抢购区域 */
	.right-section {
	  flex: 2;
	  background: #E0501B; /* 深黄色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	/* 文字样式 */
	.cart-text {
	  color: #FF7300; /* 橙色文字 */
	  font-size: 27rpx;
	  font-weight: 500;
	}
	
	.action-text {
	  color: #FFFFFF; /* 白色文字 */
	  font-size: 32rpx;
	  font-weight: bold;
	  letter-spacing: 2rpx;
	}
	
	/* 点击交互效果 */
	.button-container:active {
	  opacity: 0.9;
	  transform: scale(0.98);
	  transition: all 0.2s;
	}
</style>